<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="dataForm.srid" clearable class="filter-item" style="width: 150px;" placeholder="选择大区">
        <el-option
          v-for="(item, index) in serverRegionList"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-checkbox v-model="dataForm.formal" @change="handleCheckbox">只看正式服</el-checkbox>
    </div>
    <div style="width: 200px; margin: 0 auto; font-weight: bold;">当前总在线：{{ total }}</div>
    <div ref="echartsContainer" style="width: 100%; height: 700px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getServerRegionList } from '@/api/ops'
import { getOnlineRealtime } from '@/api/statis'

export default {
  name: 'RealTime',
  data() {
    return {
      dataForm: {
        srid: '',
        formal: true
      },
      total: 0,
      serverRegionList: []
    }
  },
  created() {
    this.getServerRegionList()
    this.getList()
  },
  methods: {
    async getServerRegionList() {
      const res = await getServerRegionList()
      this.serverRegionList = res.data
    },
    handleFilter() {
      this.getList()
    },
    async getList() {
      this.listLoading = true
      const res = await getOnlineRealtime(this.dataForm)
      this.listLoading = false
      this.list = res.data
      this.hanleChart()
    },
    handleCheckbox(value) {
      this.dataForm.formal = value
    },
    hanleChart() {
      this.chartSeriesData = []
      this.chartxAxisData = []
      let total = 0
      this.list.forEach(v => {
        this.chartxAxisData.push(v.sname + '(' + v.sid + ')')
        this.chartSeriesData.push(v.num)
        total += parseInt(v.num)
      })
      this.total = total
      var myChart = echarts.init(this.$refs.echartsContainer)
      var seriesLabel = {
        normal: {
          show: true,
          color: '#fff',
          position: 'insideLeft',
          verticalAlign: 'middle'
        }
      }
      myChart.setOption({
        color: ['#3398DB'],
        tooltip: {},
        xAxis: {},
        yAxis: {
          data: this.chartxAxisData
        },
        series: [{
          name: '在线',
          type: 'bar',
          label: seriesLabel,
          barWidth: '20px',
          data: this.chartSeriesData
        }]
      })
    }
  }
}
</script>
